<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下载钉钉</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="icon" href="img/TB1az8zBhD1gK0jSZFsXXbldVXa-1150-1074.png">
    <link rel="stylesheet" href="css/bottom.css">
    <style>
        *{
            box-sizing: border-box;

        }
        body{
            /*width: 100%;*/
            min-width: 1200px;
        }

        /*顶部导航栏*/

        .header{
            position: absolute;
            width: 100%;
            min-width: 1280px;
            height: 80px;
            top: 0;
            background: #fff;
        }
        .topBox{
            width: 1210px;
            height: 80px;
            position: relative;
            display: flex;
            flex-direction: row;
            margin: 0 auto;
        }
        .topBoxLogo{
            width: 101px;
            height: 80px;
            display: flex;
            align-items: center;
            margin: 0 0 0 0;
        }
        .topBoxLogo a{
            position: relative;
            display: block;
            width: 101px;
            height: 38px;
            background: url("img/empHealth/imImg/TB1aNrLGlr0gK0jSZFnXXbRRXXa-202-76.png");
            background-size: 100%;
        }
        .topBoxNav{
            width: 760px;
            height: 80px;
            margin-left: 28px;
            display: flex;
        }
        .topBoxNav>div{
            position: relative;
            display: flex;
            height: 80px;
            margin:0 25px 0 0;
            align-items: center;
        }
        .topBoxNav>div>a{
            font-size: 16px;
            color: #000000;
            line-height: 80px;
        }
        /*箭头的CSS*/
        .topBoxNavDown{
            width: 11px;
            height: 11px;
            background: url("img/empHealth/imImg/down.png");
            background-size: 100%;
            margin:1px 0 0 5px ;
        }

        .topBoxEnd{
            position: relative;
            width: 350px;
            height: 80px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
        }
        .topBoxEndReg{
            position: relative;
            display: block;
            width: 120px;
            height: 46px;
            margin-right: 10px;
            padding: 2px;
            line-height: 40px;
            font-size: 16px;
            font-weight: bold;
            color: #005EFF;
            text-align: center;
            border: 1px solid #005EFF;
            border-radius: 23px;
            box-sizing: border-box;
        }
        .topBoxEndReg:hover{
            padding: 0;
            border: 3px solid #005EFF;
            color: #005EFF;
        }
        .topBoxEndDow{
            position: relative;
            display: block;
            width: 120px;
            height: 46px;
            margin-right: 25px;
            padding: 2px;
            line-height: 40px;
            font-size: 16px;
            font-weight: bold;
            color: #fff;
            text-align: center;
            background: #005EFF;
            border-radius: 23px;
            box-sizing: border-box;
        }
        .topBoxEndDow:hover{
            color: #FFFFFF;
            background-color: #1F56DE;
        }
        .topBoxEndEnter{
            position: relative;
            font-size: 16px;
            color: #000000;
            text-align: center;
        }
        .topBoxEndEnter:hover{
            color: #005EFF;
        }

        /*产品介绍弹窗*/
        .popup{
            position: absolute;
            top: 68px;
            left: -13px;
            width: 360px;
            background-color: #fff;
            box-shadow: 0 10px 16px 0 rgba(0,0,0,0.18);
            border-radius: 6px;
            z-index: 9999;
        //animation: mypopup 1s;
        }
        /*box-shadow属性向框添加一个或多个阴影。
        box-shadow: h-shadow v-shadow blur spread color inset;
        h-shadow:必需,水平阴影的位置,允许负值,
        v-shadow:必需。垂直阴影的位置。允许负值。
        blur:可选。模糊距离。
        spread:可选。阴影的尺寸。
        color:可选。阴影的颜色。请参阅 CSS 颜色值。
        inset:可选。将外部阴影 (outset) 改为内部阴影。
        */

        /*定义动画帧
        @keyframes mypopup {
            0%{
                height: 0px;
            }
            100%{
                height:228px;
            }
        }
        */

        .popupBg{
            position: relative;
            width: 360px;
            display: flex;
            border-radius: 6px;
            box-sizing: border-box;
        }

        .popupLeftTxt{
            position: relative;
            width: 180px;
            height: 38px;
            line-height: 38px;
            padding: 0 15px;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            border-radius: 6px;
        }
        .popupLeftOne{
            color:#000 ;
            background-color: #f6f6f6;
        }
        .popupLeftTxt img{
            position: absolute;
            width: 12px;
            height: 12px;
            right: 12px;
        }


        .popupRight{
            background-color: #f6f6f6;
            border-radius: 6px;
        }
        .popupRight div a{
            display: block;
            width: 180px;
            height: 38px;
            line-height: 38px;
            padding: 0 15px;
            font-size: 14px;
            color: rgba(0, 0, 0, .7);
            border-radius: 6px;
        }

        .popupRight div a:hover{
            color: #005EFF;
        }

        /*智能化办公弹窗*/
        .hotActPopup{
            position: absolute;
            width: 100%;
            min-width: 1180px;
            padding: 36px 0;
            background-color: #fff;
            border-top: 1px solid #ebeced;
            z-index: 999;
        }
        .hotActPopupBg{
            position: relative;
            max-width: 1200px;
            min-width: 1180px;
            margin: 0 auto;
            display: flex;
            flex-flow: row wrap;
        }
        .hotActPopupDiv{
            width: 215px;
            display: flex;
            padding-bottom:30px ;
            margin: 0 0.5%;
            text-align: center;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            z-index: 1000;
        }
        .hotActPopupDiv img{
            width: 86px;
            height: 86px;
        }
        .hotActPopupDiv div:nth-child(2){
            font-size: 16px;
            color: #333;
        }
        .hotActPopupDiv div:nth-child(2) span{
            background: #62D5B4;
            color: #fff;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            padding: 0px 3px;
            font-size: 12px;
            border-radius: 4px;
            margin-bottom: 4px;
        }
        .hotActPopupDiv div:last-child{
            font-size: 16px;
            color: #3692fa;
            margin-top: 5px;
        }

        .topBoxNavFive>a:hover,.topBoxNavThree>a:hover ,.topBoxNavTwo>a:hover{
            color: #005EFF;
        }

        /*解决方案的弹窗*/
        .solutionPopup{
            width: 180px;
            position: absolute;
            top: 68px;
            left: -12px;
            background-color: #fff;
            box-shadow: 0 10px 16px 0 rgba(0,0,0,0.18);
            border-radius: 6px;
            z-index: 9999;
        }
        .solutionPopupA{
            display: block;
            width: 180px;
            height: 38px;
            line-height: 38px;
            padding:0 13px;
            font-size: 14px;
            color: rgba(0,0,0,0.7);
            border-radius: 6px;
        }

        /*支持与服务弹窗*/
        .supportPopup{
            position: absolute;
            width: 180px;
            top: 68px;
            left: -12px;
            background-color: #fff;
            box-shadow: 0 10px 16px 0 rgba(0,0,0,0.18);
            border-radius: 6px;
            z-index: 9999;
        }
        .supportPopupA{
            display: block;
            width: 180px;
            height: 38px;
            line-height: 38px;
            padding: 0 13px;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.7);
            border-radius: 6px;
        }

        /*中文弹窗*/
        .chinaPopup{
            position: absolute;
            width: 180px;
            top: 68px;
            left: -12px;
            background-color: #fff;
            box-shadow: 0 10px 16px 0 rgba(0,0,0,0.18);
            border-radius: 6px;
            z-index: 9999;
        }
        .chinaPopupA{
            display: block;
            width: 180px;
            height: 38px;
            line-height: 38px;
            padding: 0 13px;
            font-size: 14px;
            color: rgba(0,0,0,0.7);
        }

        /*********************/

        article{
            width: 100%;
            height: 614px;
            margin: 0 auto;
            background-color: #FFFFFF;
        }
        article .content{
            width: 1200px;
            /*height: 614px;*/
            padding: 64px 100px;
            margin: 0 auto;
            background-color: #FFFFFF;
            overflow: hidden;
            /*float: left;*/
            /*display: flex;*/
            /*flex-flow: row nowrap;*/
            /*justify-content: space-around;*/
        }
        .con-left{
            width: 240px;
            height: 486px;
            background-color: #FFFFFF;
            padding: 55px 0 0;
            border-radius: 30px;
            border: 1px solid #E4E4E4;
            float: left;

        }
        .con-left .screen{
            width: 215px;
            height: 377px;
            background-color: #FFFFFF;
            border: 1px solid #E4E4E4;
            margin:  0 auto;

        }
        .con-left .screen .qrcode{
            width: 150px;
            height: 150px;
            margin: 0 auto;

        }
        .con-left .screen .qrcode img{
            margin-top: 80px;
            width: 100%;
            height: 100%;
        }
        .con-left .screen .text {
            text-align: center;
            margin-top: 90px;
        }
        .content .con-right{
            width: 702px;
            height: 358px;
            float: right;
            background-color: #FFFFFF;
        }
        .content .con-right .top{
            margin-top: 20px;
        }
        .content .con-right .t1{
            font-size: 18px;
            color: black;
        }
        .content .con-right .t2{
            color: #999999;
            font-size: 14px;
            margin-top: 10px;
        }
        .content .mid{
            width: 702px;
            height: 168px;
            margin-top: 20px;
            /*background-color: #5F9EA0;*/
            display: flex;
            flex-flow: row nowrap;
            justify-content:space-around ;
        }
        .content .mid .mid-con{
            width: 168px;
            height: 168px;
            border: 1px solid #E4E4E4;
            background-color: #FFFFFF;
        }
        .content .mid .mid-con .mid-img{
            width: 100%;
            padding-top: 30px;
            margin:  auto;
        }
        .content .mid .mid-con .mid-img img{
            display: block;
            width: 53px;
            height: 53px;
            margin: 0 auto;
        }
        .content .mid-text{
            text-align: center;
            font-size: 16px;
            color: #999999;
        }
        .content .after{
            width: 166px;
            height: 166px;
            background-color: #f8f8f8;
        }
        .content .after .an-img{
            width: 100%;
            padding-top: 15px;
        }
        .content .after .an-img img{
            display: block;
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
        .content .after .an-text{
            margin-top: 10px;
            text-align: center;
            color: black;
        }
        .content .bot{
            width: 394px;
            height: 56px;
            margin-top: 10px;
        }
        .content .bot img{
            width: 100%;
            height: 100%;
        }
        .log{
            width: 100%;
            /*height: 4000px;*/
            background-color: #FFFFFF;
        }
        .hd{
            width: 1000px;
            height: 31px;
            font-size: 24px;
            color: black;
            margin: 0 auto;
        }
        .main{
            width: 1000px;
            /*height: 434px;*/
            margin: 0 auto;
            background-color: #FFFFFF;
            padding-top: 20px;
        }
        .main .m1{
            width: 1000px;
            background-color: #FFFFFF;
            font-size: 20px;
        }
        .main .m1 span:nth-child(2){
            color: red;
        }
        .main .m1 span:nth-child(3){
            margin-left:30px;
            color: #999999;
        }
        .main .log-con{
            width: 1000px;
            background-color:#FFFFFF ;
            padding-top: 20px;
        }
        .main .log-con .log-con1{
            margin-bottom: 20px;
        }
        .update{
            width: 1000px;
            margin: 0 auto;
            padding-bottom: 30px;
            user-select: none;
            cursor: pointer;
        }
        .update .up-hd{
            margin-top: 20px;
            width: 1000px;
            font-size: 20px;
            color: #444444;
        }
        .update .up-hd .up{
            margin-left:95px;
            color: #999999;
        }
        .discon{
            width: 1000px;
            /*height: 100px;*/
            padding-top: 20px;
            background-color: #FFFFFF;
        }


    </style>
</head>
<body>
<header class="top" id="topId">
    <div class="topBox">
        <div class="topBoxLogo">
            <a href="homePage.html" target="_blank"></a>
        </div>
        <div class="topBoxNav">
            <div class="topBoxNavOne" onmouseover="mouseOver(popup)" onmouseout="mouseOut1(popup)">
                <a href="">产品介绍</a>
                <!--                    style="overflow: hidden; display: none; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;-->
                <div class="popup" style="display: none;">
                    <div class="popupBg">
                        <div class="popupLeft">
                            <div class="popupLeftTxt popupLeftOne">组织在线<img src="img/empHealth/imImg/right.png" alt=""></div>
                            <div class="popupLeftTxt popupLeftTwo">沟通在线<img src="img/empHealth/imImg/right.png" alt=""></div>
                            <div class="popupLeftTxt popupLeftThree">业务在线<img src="img/empHealth/imImg/right.png" alt=""></div>
                            <div class="popupLeftTxt popupLeftFour">协同在线<img src="img/empHealth/imImg/right.png" alt=""></div>
                            <div class="popupLeftTxt popupLeftFive">生态在线<img src="img/empHealth/imImg/right.png" alt=""></div>
                            <div class="popupLeftTxt popupLeftSix">钉钉教育<img src="img/empHealth/imImg/right.png" alt=""></div>
                        </div>
                        <div class="popupRight">
                            <div class="popupRightOne" >
                                <a href="empHealth.html" target="_blank">员工健康</a>
                                <a href="">企业通讯录</a>
                                <a href="">智能人事</a>
                                <a href="">钉钉圈子</a>
                                <a href="">数字化绩效</a>
                            </div>
                            <div class="popupRightTwo" style="display: none">
                                <a href="">即时沟通</a>
                                <a href="">DING</a>
                                <a href="">视频会议</a>
                                <a href="">电话会议</a>
                                <a href="">办公电话</a>
                                <a href="">群直播</a>
                            </div>
                            <div class="popupRightTree" style="display: none">
                                <a href="">企业办公支付</a>
                                <a href="">智能客户管理</a>
                                <a href="">智能填表</a>
                            </div>
                            <div class="popupRightFour" style="display: none">
                                <a href="">代办（任务）</a>
                                <a href="">钉钉项目</a>
                                <a href="">日程</a>
                                <a href="">钉钉智能文档</a>
                                <a href="">OA审批</a>
                                <a href="">无接触考勤</a>
                                <a href="">智能薪酬</a>
                                <a href="">日志</a>
                                <a href="">钉盘</a>
                                <a href="">钉邮</a>
                                <a href="">智能会议室</a>
                                <a href="">智能填表</a>
                            </div>
                            <div class="popupRightFive" style="display: none">
                                <a href="">开放平台</a>
                                <a href="">钉钉广场</a>
                                <a href="">专属钉钉</a>
                                <a href="">新职业在线平台</a>
                            </div>
                            <div class="popupRightSix" style="display: none">
                                <a href="">智能备课平台</a>
                                <a href="">在线课堂</a>
                                <a href="">在线智能作业</a>
                                <a href="">家校通讯录</a>
                                <a href="">班级群</a>
                                <a href="">家校本（作业）</a>
                                <a href="">班级打卡</a>
                                <a href="">班级通知</a>
                                <a href="">班级树</a>
                                <a href="">班级圈</a>
                                <a href="">学生号</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="topBoxNavTwo" onmouseover="mouseOver(hotActPopup)" onmouseout="mouseOut1(hotActPopup)">
                <a href="">智能办公硬件</a>
            </div>
            <div class="topBoxNavThree"><a href="hot.html">热门活动</a></div>
            <div class="topBoxNavFour" onmouseover="mouseOver(solutionPopup)" onmouseout="mouseOut(solutionPopup,solutionPopupA)">
                <a href="">解决方案</a>
                <div class="solutionPopup" style="display: none">
                    <a href="uniqueStuds.html" class="solutionPopupA">专属钉钉</a>
                    <a href="" class="solutionPopupA">音视频重保服务</a>
                    <a href="" class="solutionPopupA">整车制造数字化</a>
                    <a href="" class="solutionPopupA">钉钉商业智能</a>
                    <a href="" class="solutionPopupA">ERP业务在线</a>
                    <a href="" class="solutionPopupA">生态组织在线</a>
                    <a href="" class="solutionPopupA">数字区县</a>
                    <a href="" class="solutionPopupA">数字高效</a>
                    <a href="" class="solutionPopupA">数字医共体</a>
                    <a href="" class="solutionPopupA">数字零售门店</a>
                    <a href="" class="solutionPopupA">保险行业</a>
                    <a href="" class="solutionPopupA">专属安全</a>
                    <a href="" class="solutionPopupA">数据边界管理</a>
                    <a href="" class="solutionPopupA">酒店数字化</a>
                    <a href="" class="solutionPopupA">企业数字化智能引擎</a>

                </div>
            </div>
            <div class="topBoxNavFive"><a href="check.html">查企业</a></div>
            <div class="topBoxNavSix" onmouseover="mouseOver(supportPopup)" onmouseout="mouseOut(supportPopup,supportPopupA)">
                <a href="">支持与服务</a>
                <div class="supportPopup" style="display: none" >
                    <a href="" class="supportPopupA" >开放平台</a>
                    <a href="" class="supportPopupA">钉钉头条</a>
                    <a href="studsServe.html" class="supportPopupA">钉钉服务</a>
                    <a href="" class="supportPopupA">使用手册</a>
                    <a href="" class="supportPopupA">客户案例</a>
                </div>
            </div>
            <div class="topBoxNavSeven" onmouseover="mouseOver(chinaPopup)" onmouseout="mouseOut(chinaPopup,chinaPopupA)">
                <a href="">中文</a>
                <a href="" class="topBoxNavDown"></a>
                <div class="chinaPopup" style="display: none">
                    <a href="" class="chinaPopupA" >English</a>
                    <a href="" class="chinaPopupA">中文</a>
                    <a href="" class="chinaPopupA">繁体中文</a>
                    <a href="" class="chinaPopupA">日本語</a>
                </div>
            </div>
        </div>
        <div class="topBoxEnd">
            <a href="register.html" target="_blank" class="topBoxEndReg">注册钉钉</a>
            <a href="download.html" target="_blank" class="topBoxEndDow">下载钉钉</a>
            <a href="loginStuds.html" target="_blank" class="topBoxEndEnter">企业登录</a>
        </div>
    </div>
    <div class="hotActPopup" style="display: none">
        <div class="hotActPopupBg">
            <div class="hotActPopupDiv hotActPopup1" onclick="window.open('videoF1.html')">
                <img src="img/empHealth/gwImg/TB1t0ZVGvb2gK0jSZK9XXaEgFXa-172-172.png" alt="">
                <div><span>新</span>F1视频会议一体机</div>
                <div>2699元</div>
            </div>
            <div class="hotActPopupDiv hotActPopup2">
                <img src="img/empHealth/gwImg/TB159DiGXT7gK0jSZFpXXaTkpXa-172-172.png" alt="">
                <div><span>新</span>Nreal AR眼镜套装</div>
                <div>10999元</div>
            </div>
            <div class="hotActPopupDiv hotActPopup3">
                <img src="img/empHealth/gwImg/TB1WYLce5cKOu4jSZKbXXc19XXa-172-172.png" alt="">
                <div><span>新</span>D3智能人脸考勤门禁机</div>
                <div>5049元</div>
            </div>
            <div class="hotActPopupDiv hotActPopup4">
                <img src="img/empHealth/gwImg/TB1jM1iw7P2gK0jSZPxXXacQpXa-172-172.png" alt="">
                <div><span>新</span>钉钉智能云打印</div>
                <div>限时免费</div>
            </div>
            <div class="hotActPopupDiv hotActPopup5">
                <img src="img/empHealth/gwImg/TB1VOm.p.T1gK0jSZFhXXaAtVXa-172-172.png" alt="">
                <div>钉钉智点 B1</div>
                <div>46.8元</div>
            </div>
            <div class="hotActPopupDiv hotActPopup6">
                <img src="img/empHealth/gwImg/TB1NCvrqNv1gK0jSZFFXXb0sXXa-172-172.png" alt="">
                <div>M1Y人脸识别考勤机</div>
                <div>379元</div>
            </div>
            <div class="hotActPopupDiv hotActPopup7">
                <img src="img/empHealth/gwImg/TB1GXr5ahD1gK0jSZFKXXcJrVXa-172-172.png" alt="">
                <div>M2S智能前台</div>
                <div>2849元</div>
            </div>
            <div class="hotActPopupDiv hotActPopup8">
                <img src="img/empHealth/gwImg/TB1z9F6dX67gK0jSZPfXXahhFXa-172-172.png" alt="">
                <div>M1 pro智能考勤机</div>
                <div>148元</div>
            </div>
            <div class="hotActPopupDiv hotActPopup9">
                <img src="img/empHealth/gwImg/TB16NLwlwHqK1RjSZJnXXbNLpXa-172-172.png" alt="">
                <div>M1X人脸考勤机</div>
                <div>348元</div>
            </div>
            <div class="hotActPopupDiv hotActPopup10">
                <img src="img/empHealth/gwImg/TB1XalZvhD1gK0jSZFsXXbldVXa-172-172.png" alt="">
                <div>X2指纹考勤门禁机</div>
                <div>499元</div>
            </div>

        </div>
    </div>
</header>

<!--    这是主体内容-->
    <article>
        <div class="content">
            <div class="con-left">
                <div class="screen">
                    <div class="qrcode">
                        <img src="img/download/TB1nqdHV4jaK1RjSZFAXXbdLFXa-300-300.png" alt="">
                    </div>
                    <div class="text">
                        <p>下载二维码</p>
                        <p>下载手机客户端</p>
                    </div>

                </div>
            </div>

<!--            内容右部分-->
            <div class="con-right">
<!--                文字部分-->
                <div class="top">
                    <p class="t1">立即下载</p>
                    <p class="t2">让企业进入高效移动办公时代</p>
                </div>
<!--                右边的中间部分-->
                <div class="mid">
                    <div class="mid-con m1" onmouseover="mouseover(android,android1)" onmouseout="mouseout(android,android1)">
<!--                        移入之前-->
                        <div class="android"  >
                            <div class="mid-img">
                                <img src="img/download/Android.png" alt="">
                            </div>
                            <div class="mid-text">
                                <p>Android</p>
                            </div>
                        </div>
                        <div class="after android1 " style="display: none">
                            <div class="an-img">
                                <img src="img/download/TB1EF9xGbj1gK0jSZFOXXc7GpXa-260-260%20(1).png" alt="">
                            </div>
                            <div class="an-text">
                                <p>扫描二维码</p>
                                <p>下载Android正式版</p>
                            </div>
                        </div>
                    </div>
                    <div class="mid-con m2" onmouseover="mouseover(iphone,iphone1)" onmouseout="mouseout(iphone,iphone1)">
<!--                        移入之前-->
                        <div class="iphone"  >
                            <div class="mid-img">
                                <img src="img/download/iPhone.png" alt="">
                            </div>
                            <div class="mid-text">
                                <p>iPhone</p>
                            </div>
                        </div>
                        <div class="after iPhone1" style="display: none">
                            <div class="an-img">
                                <img src="img/download/TB1EF9xGbj1gK0jSZFOXXc7GpXa-260-260%20(1).png" alt="">
                            </div>
                            <div class="an-text">
                                <p>扫描二维码</p>
                                <p>下载iPhone正式版</p>
                            </div>
                        </div>
                    </div>

                    <!--mac-->
                    <div class="mid-con" onmouseover="mouseover(mac,mac1)" onmouseout="mouseout(mac,mac1)">
                        <div class="mac">
                            <div class="mid-img">
                                <img src="img/download/mac.png" alt="">
                            </div>
                            <div class="mid-text">
                                <p>Mac</p>
                            </div>
                        </div>
                        <div class="after mac1" style="display: none">
                            <div class="an-img">
                                <img src="img/download/TB1EF9xGbj1gK0jSZFOXXc7GpXa-260-260%20(1).png" alt="">
                            </div>
                            <div class="an-text">
                                <p>扫描二维码</p>
                                <p>下载mac正式版</p>
                            </div>
                        </div>
                    </div>
<!--                    windows-->
                    <div class="mid-con" onmouseover="mouseover(windows,windows1)" onmouseout="mouseout(windows,windows1)">
                        <div class="windows">
                            <div class="mid-img">
                                <img src="img/download/windows.png" alt="">
                            </div>
                            <div class="mid-text">
                                <p>Windows</p>
                            </div>
                        </div>
                        <div class="after windows1" style="display: none">
                            <div class="an-img">
                                <img src="img/download/TB1EF9xGbj1gK0jSZFOXXc7GpXa-260-260%20(1).png" alt="">
                            </div>
                            <div class="an-text">
                                <p>扫描二维码</p>
                                <p>下载Windows正式版</p>
                            </div>
                        </div>
                    </div>


                </div>

<!--                右边的底部img-->
                <div class="bot">
                    <img src="img/download/TB1qhOJBmzqK1RjSZFLXXcn2XXa-394-56.png" alt="">
                </div>
                
            </div>
        </div>

    </article>

<!--日志-->
    <div class="log">
        <div class="hd">更新日志:</div>
        <div class="main">
            <div class="m1">
                <span>钉钉5.1.36手机版</span>
                <span>(NEW)</span>
                <span >2020年11月23日</span>
            </div>

            <div class="log-con">
                <div class="log-con1">
                    <p>【钉钉新增转账功能】</p>
                    <p>支持大额转账，单笔上限20万，一键提醒，支持退回，还有机会领红包，点击单聊“加号”-“转账”即可。</p>
                </div>
                <div class="log-con1">
                    <p>【钉钉新增转账功能】</p>
                    <p>支持大额转账，单笔上限20万，一键提醒，支持退回，还有机会领红包，点击单聊“加号”-“转账”即可。</p>
                </div>
                <div class="log-con1">
                    <p>【钉钉新增转账功能】</p>
                    <p>支持大额转账，单笔上限20万，一键提醒，支持退回，还有机会领红包，点击单聊“加号”-“转账”即可。</p>
                </div>
                <div class="log-con1">
                    <p>【钉钉新增转账功能】</p>
                    <p>支持大额转账，单笔上限20万，一键提醒，支持退回，还有机会领红包，点击单聊“加号”-“转账”即可。</p>
                </div>
            </div>

        </div>

    </div>

<!--    更新-->
    <div class="update">
        <div class="update-con" >
            <div class="up-hd" >
                <span onclick="click(dis1);">钉钉5.1.33手机版</span>
                <span class="up" >2020年10月26日 <img src="img/j1.png" alt="" class="img"></span>
            </div>
            <div class="dis " style="display: none">
                <div class="discon">
                    <p>【考勤打卡】</p>
                    <p>每个考勤组的打卡地点支持设置不同打卡范围，如办公室100米、工厂1000米，考勤管理更灵活。</p>
                </div>
                <div class="discon">
                    <p>【知识本权限设置】</p>
                    <p>知识本支持加人/群/部门，分享权限安全可管控。</p>
                </div>
            </div>
        </div>
        <div class="update-con">
            <div class="up-hd">
                <span>钉钉5.1.33手机版</span>
                <span class="up">2020年10月26日 <img src="img/j1.png" alt="" class="img"></span>
            </div>
            <div class="dis" style="display: none">
                <div class="discon" >
                    <p>【考勤打卡】</p>
                    <p>每个考勤组的打卡地点支持设置不同打卡范围，如办公室100米、工厂1000米，考勤管理更灵活。</p>
                </div>
                <div class="discon">
                    <p>【知识本权限设置】</p>
                    <p>知识本支持加人/群/部门，分享权限安全可管控。</p>
                </div>
            </div>
        </div>
        <div class="update-con">
            <div class="up-hd">
                <span>钉钉5.1.33手机版</span>
                <span class="up">2020年10月26日 <img src="img/j1.png" alt="" class="img"></span>
            </div>
            <div class="dis" style="display: none">
                <div class="discon">
                    <p>【考勤打卡】</p>
                    <p>每个考勤组的打卡地点支持设置不同打卡范围，如办公室100米、工厂1000米，考勤管理更灵活。</p>
                </div>
                <div class="discon">
                    <p>【知识本权限设置】</p>
                    <p>知识本支持加人/群/部门，分享权限安全可管控。</p>
                </div>
            </div>
        </div>
        <div class="update-con">
            <div class="up-hd">
                <span>钉钉5.1.33手机版</span>
                <span class="up">2020年10月26日 <img src="img/j1.png" alt="" class="img"></span>
            </div>
            <div class="dis" style="display: none">
                <div class="discon">
                    <p>【考勤打卡】</p>
                    <p>每个考勤组的打卡地点支持设置不同打卡范围，如办公室100米、工厂1000米，考勤管理更灵活。</p>
                </div>
                <div class="discon">
                    <p>【知识本权限设置】</p>
                    <p>知识本支持加人/群/部门，分享权限安全可管控。</p>
                </div>
            </div>
        </div>

    </div>
<!--底部-->
    <footer class="footer">
    <div class="footerBg">
        <div class="footerOne">
            <div class="footerOneTxt footerOneTxtOne">
                <h1>热门产品</h1>
                <ul>
                    <li>
                        <a href="">考勤表</a>
                    </li>
                    <li>
                        <a href="">日志</a>
                    </li>
                    <li>
                        <a href="">公告</a>
                    </li>
                    <li>
                        <a href="">新职业在线学习平台</a>
                    </li>
                </ul>
            </div>
            <div class="footerOneTxt footerOneTxtTwo">
                <h1>钉钉教育</h1>
                <ul>
                    <li>
                        <a href="">家校通讯录</a>
                    </li>
                    <li>
                        <a href="">班级群</a>
                    </li>
                    <li>
                        <a href="">班级打卡</a>
                    </li>
                    <li>
                        <a href="">家校本</a>
                    </li>
                </ul>
            </div>
            <div class="footerOneTxt footerOneTxtTree">
                <h1>解决方案</h1>
                <ul>
                    <li>
                        <a href="">专属钉钉</a>
                    </li>
                    <li>
                        <a href="">数字高校</a>
                    </li>
                    <li>
                        <a href="">数字医共体</a>
                    </li>
                    <li>
                        <a href="">数字零售门店</a>
                    </li>
                    <li>
                        <a href="">数字县域</a>
                    </li>
                    <li>
                        <a href="">保险行业</a>
                    </li>
                    <li>
                        <a href="">专属安全</a>
                    </li>
                </ul>
            </div>
            <div class="footerOneTxt footerOneTxtFour">
                <h1>支持与服务</h1>
                <ul>
                    <li>
                        <a href="">钉钉社区</a>
                    </li>
                    <li>
                        <a href="">开放平台</a>
                    </li>
                    <li>
                        <a href="">模板中心</a>
                    </li>
                    <li>
                        <a href="">使用手册</a>
                    </li>
                    <li>
                        <a href="">安全技术</a>
                    </li>
                    <li>
                        <a href="">合作伙伴</a>
                    </li>
                </ul>
            </div>
            <div class="footerOneTxt footerOneTxtFive">
                <h1>法律</h1>
                <ul>
                    <li>
                        <a href="">钉钉公约</a>
                    </li>
                    <li>
                        <a href="">法律声明</a>
                    </li>
                    <li>
                        <a href="">服务协议</a>
                    </li>
                    <li>
                        <a href="">钉钉隐私政策</a>
                    </li>
                    <li>
                        <a href="">钉钉SDK说明</a>
                    </li>
                    <li>
                        <a href="">钉钉儿童隐私政策</a>
                    </li>
                </ul>
            </div>
            <div class="footerOneTxt footerOneTxtSix">
                <h1>钉钉</h1>
                <ul>
                    <li>
                        <a href="">加入我们</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="footerTwo">
            <div class="footerTwoLeft">
                <div class="footerTwoLeftTxt">
                    <p>市场商务合作</p>
                    <p>dingtalk_market@service.dingtalk.com</p>
                </div>
                <div class="footerTwoLeftIcon footerTwoLeftIconOne">
                    <div class="footerTwoLeftIconSon" onmouseover="mouseoverFooterleft(1)" onmouseout="mouseoutFooterleft(1)">
                        <a href="">
                            <img class="footerTwoLeftIcon1" src="" alt="">
                        </a>
                    </div>
                </div>
                <div class="footerTwoLeftIcon footerTwoLeftIconTwo">
                    <div class="footerTwoLeftIconSon" onmouseover="mouseoverFooterleft(2)" onmouseout="mouseoutFooterleft(2)" >
                        <img class="footerTwoLeftIcon2" src="" alt="">
                        <div class="footerPopup footerPopup1">
                            <div class="footerPopup-text">
                                付老师超级帅 ！！！
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footerTwoLeftIcon footerTwoLeftIconTree">
                    <div class="footerTwoLeftIconSon" onmouseover="mouseoverFooterleft(3)" onmouseout="mouseoutFooterleft(3)">
                        <img class="footerTwoLeftIcon3" src="" alt="">
                        <div class="footerPopup footerPopup2">
                            <div class="footerPopup-text">
                                付老师我偶像 ！！！
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footerTwoLeftIcon footerTwoLeftIconFour">
                    <div class="footerTwoLeftIconSon" onmouseover="mouseoverFooterleft(4)" onmouseout="mouseoutFooterleft(4)">
                        <img class="footerTwoLeftIcon4" src="" alt="">
                        <div class="footerPopup footerPopup3">
                            <div class="footerPopup-text">
                                付老师 请打高分！！
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footerTwoRight">
                <div class="footerTwoRightIcon footerTwoRightIphone" onmouseover="mouseoverFooterRight(5)" onmouseout="mouseoutFooterRight(5)">
                    <img class="footerRightIcon1" src="" alt="">
                    <div class="footerPopup footerPopup4">
                        <div class="footerPopup-text1">
                            组员：&emsp;刘&emsp;玲&emsp;何姝柳&emsp;朱忠媛杨&emsp;程
                        </div>
                    </div>
                </div>
                <div class="footerTwoRightIcon footerTwoRightAndroid" onmouseover="mouseoverFooterRight(6)" onmouseout="mouseoutFooterRight(6)">
                    <img class="footerRightIcon2" src="" alt="">
                    <div class="footerPopup footerPopup5">
                        <div class="footerPopup-text2">
                            谢谢打赏
                        </div>
                    </div>
                </div>
                <div class="footerTwoRightIcon footerTwoRightMac">
                    <a href="" class="footerRightIcon3"></a>
                </div>
                <div class="footerTwoRightIcon footerTwoRightWindow">
                    <a href="" class="footerRightIcon4"></a>
                </div>
            </div>
        </div>

        <div class="footerThree">
            <div class="footerThreePartner">
                <a href=""><span>阿里巴巴集团</span></a>
                <a href=""><span>淘宝网</span></a>
                <a href=""><span>天猫</span></a>
                <a href=""><span>聚划算</span></a>
                <a href=""><span>全球速卖通</span></a>
                <a href=""><span>阿里巴巴国际交易市场</span></a>
                <a href=""><span>1688</span></a>
                <a href=""><span>阿里妈妈</span></a>
                <a href=""><span>飞猪</span></a>
                <a href=""><span>阿里云计算</span></a>
                <a href=""><span>AliOS</span></a>
                <a href=""><span>支付宝</span></a>
                <a href=""><span>支付宝商家平台</span></a>
                <a href=""><span>UC</span></a>
                <a href=""><span>天猫新零售</span></a>
                <a href=""><span>阿里聚安全</span></a>
                <a href=""><span>达摩院</span></a>
                <a href=""><span>友盟</span></a>
            </div>
            <div>阿里钉钉Ⓒ版权公告© 2014-2020 钉钉（中国）信息技术有限公司和／或其关联公司版权所有</div>
            <div class="footerThreeLast">
                <a href="">浙ICP备18037475号 </a>
                跨地区增值电信业务证号：
                <a href="">B2-20184300 </a>
                浙江省增值电信业务经营许可证：
                <a href="">浙B2-20180981</a>
            </div>
            <div class="footerThreeEnd">
                <img src="img/empHealth/gwImg/TB1WvYPX2WG3KVjSZFPXXXaiXXa-40-40.png" alt="">
                <a href="">浙公网安备 33011002010140号</a>
                <img src="img/empHealth/imImg/TB1GxwdSXXXXXa.aXXXXXXXXXXX-65-70.gif" alt="">
            </div>
        </div>
    </div>
</footer>


    <script>
        let  popup = document.querySelector(".popup");
        let popupBg = document.querySelector(".popupBg");

        let popupLeft = document.querySelectorAll(".popupLeft div");
        let popupRight = document.querySelectorAll(".popupRight div");

        function mouseOver(x){
            x.style.display = 'block';
        }
        function mouseOut1(x) {
            x.style.display = 'none';
        }
        function mouseOut(x,y){
            x.style.display = 'none';
            for(let content of y){
                content.style.backgroundColor = '#fff';
                content.style.color= 'rgba(0, 0, 0, 0.7)' ;
            }
        }
        popupLeft.forEach((items ,index) =>{
            popupLeft[index].onmouseover = function (){
                for(let content of popupLeft){
                    content.style.backgroundColor = '#fff';
                    content.style.color= 'rgba(0, 0, 0, 0.7)' ;
                }
                for(let content of popupRight){
                    content.style.display = 'none';
                }
                popupLeft[index].style.color= '#000' ;
                popupLeft[index].style.backgroundColor = '#f6f6f6';
                popupRight[index].style.display = 'block';
            }
        })

        //智能办公弹窗
        let hotActPopup = document.querySelector(".hotActPopup");

        hotActPopup.onmouseover = function (){
            hotActPopup.style.display = 'block';
        }

        //解决方案弹窗
        let solutionPopup = document.querySelector(".solutionPopup");
        let solutionPopupA = document.querySelectorAll(".solutionPopupA");

        solutionPopupA.forEach((items,index) =>{
            solutionPopupA[index].onmouseover = function (){
                for(let content of solutionPopupA){
                    content.style.backgroundColor = '#fff';
                    content.style.color= 'rgba(0, 0, 0, 0.7)' ;
                }
                this.style.color = '#005EFF';
                this.style.backgroundColor = '#f6f6f6';
            }
        })
        /*支持与服务弹窗*/
        let supportPopup = document.querySelector(".supportPopup");
        let supportPopupA = document.querySelectorAll(".supportPopupA");


        supportPopupA.forEach((items,index) =>{
            supportPopupA[index].onmouseover = function (){
                for(let content of supportPopupA){
                    content.style.backgroundColor = '#fff';
                    content.style.color= 'rgba(0, 0, 0, 0.7)' ;
                }
                items.style.color = '#005EFF';
                items.style.backgroundColor = '#f6f6f6';
            }
        })
        // 中文弹窗
        let chinaPopup = document.querySelector(".chinaPopup");
        let chinaPopupA = document.querySelectorAll(".chinaPopupA");

        chinaPopupA.forEach( (items,index) =>{
            chinaPopupA[index].onmouseover = function (){
                for(let content of chinaPopupA){
                    content.style.backgroundColor = '#fff';
                    content.style.color= 'rgba(0, 0, 0, 0.7)' ;
                }
                items.style.color = '#005EFF';
                items.style.backgroundColor = '#f6f6f6';
            }
        })

        let midCon=document.querySelector(".mid-con");
        let android=document.querySelector(".android");
        let android1=document.querySelector(".android1");
        let iphone=document.querySelector(".iphone");
        let mc2=document.querySelector(".mc2");
        let iphone1=document.querySelector(".iPhone1");
        let mac=document.querySelector(".mac");
        let mac1=document.querySelector(".mac1");
        let windows=document.querySelector(".windows");
        let windows1=document.querySelector(".windows1");
        let up=document.querySelector(".up");
        let dis=document.querySelectorAll(".dis");
        let img=document.querySelectorAll(".img");
        let uphds=document.querySelectorAll(".up-hd");

        //移入移出事件  移入弹出二维码  移除还原
        function mouseover(x,y){
            x.style.display="none";
            y.style.display="block";
        }
        function mouseout(x,y){
            x.style.display="block";
            y.style.display="none";
        }

        //点击事件  当第一次点击该事件弹出来  第二次点击收回去
        let flag=false;
        uphds.forEach((item,index)=>{
            item.onclick=function (){
                if (flag==false){
                    dis[index].style.display="block";
                    img[index].src="img/j2.png";
                    flag=true;
                }else if (flag){
                    dis[index].style.display="none";
                    img[index].src="img/j1.png";
                    flag=false;
                }
                
            }

        })

    //    底部js
        //底部图标变换事件

        let footerTwoLeftIcon1 = document.querySelector(".footerTwoLeftIcon1");
        let footerTwoLeftIcon2 = document.querySelector(".footerTwoLeftIcon2");
        let footerTwoLeftIcon3 = document.querySelector(".footerTwoLeftIcon3");
        let footerTwoLeftIcon4 = document.querySelector(".footerTwoLeftIcon4");

        let footerRightIcon1 = document.querySelector(".footerRightIcon1");
        let footerRightIcon2 = document.querySelector(".footerRightIcon2");

        let footerPopup1 = document.querySelector(".footerPopup1");
        let footerPopup2 = document.querySelector(".footerPopup2");
        let footerPopup3 = document.querySelector(".footerPopup3");

        let footerPopup4 = document.querySelector(".footerPopup4");
        let footerPopup5 = document.querySelector(".footerPopup5");


        function mouseoverFooterleft(x){
            if (x == 1){
                footerTwoLeftIcon1.className = 'footerTwoLeftIcon1off';
            }else if (x == 2){
                footerTwoLeftIcon2.className = 'footerTwoLeftIcon2off';
                footerPopup1.style.display = 'block';
            }else if (x == 3){
                footerTwoLeftIcon3.className = 'footerTwoLeftIcon3off';
                footerPopup2.style.display = 'block';
            }else if (x == 4){
                footerTwoLeftIcon4.className = 'footerTwoLeftIcon4off';
                footerPopup3.style.display = 'block';
            }
        }
        function mouseoutFooterleft(x){
            if (x == 1){
                footerTwoLeftIcon1.className = 'footerTwoLeftIcon1';
            }else if (x == 2){
                footerTwoLeftIcon2.className = 'footerTwoLeftIcon2';
                footerPopup1.style.display = 'none';
            }else if (x == 3){
                footerTwoLeftIcon3.className = 'footerTwoLeftIcon3';
                footerPopup2.style.display = 'none';
            }else if (x == 4){
                footerTwoLeftIcon4.className = 'footerTwoLeftIcon4';
                footerPopup3.style.display = 'none';
            }
        }
        function mouseoverFooterRight(x){
            if (x == 5){
                footerRightIcon1.className = 'footerRightIcon1off'
                footerPopup4.style.display = 'block';
            }else if(x == 6){
                footerRightIcon2.className = 'footerRightIcon2off'
                footerPopup5.style.display = 'block';
            }
        }
        function mouseoutFooterRight(x){
            if (x == 5){
                footerRightIcon1.className = 'footerRightIcon1'
                footerPopup4.style.display = 'none';
            }else if(x == 6){
                footerRightIcon2.className = 'footerRightIcon2'
                footerPopup5.style.display = 'none';
            }
        }

    </script>



</body>
</html>